[ CSS 02 ] 各種裝飾

background

顏色可以有的表示方法

• 寫顏色名稱 red、green 等等
• 色碼 #ff00f0;
• rgb(244, 40, 100);
• rgba(244, 40, 100, 0.5);

放圖片

• background: url("./bg.jpg");
• background: url("./bg.jpg")no-repeat; 圖片不重複
• background: url("./bg.jpg")no-repeat center center; X Y 軸都放中間，另外還有bottom、top、left、right 可以放
• background-size: 200px 100px ，寬 200px ，高 100px，單位也可以用%
• background-size: contain ，不變形，剛剛好放進去
• background-size: cover ，不變型，但要把這個區塊塞好塞滿，所以放大的圖片可能會被切到一些

把自己框起來：border 與 border-radius

• border: 2px solid green 出現 2px 綠色的框框，內容區會被邊框給擠掉，因為邊框是往裡面長
• border-radius: 5px ，四個角被圓化，數字越大越圓
• outline: 5px solid black ，不會吃掉內容，它是往外長

可以分開設置

• border-top: 2px solid green
• border-bottom: 2px solid red
• border-left: 20px solid blue
• transparent 透明

margin 與 padding

• padding: 10px 上下左右都 10px
• padding: 10px 20px 上下 10px 左右 20px

通常瀏覽器會自動加個 margin: 8px
所以想要完全貼合邊邊，加上下面這串就可以了

body {
  margin: 0;
}

文字相關：color、font-family、font-weight 與 line-height

• font-weight: normal; 字的粗細，normal一般大小
• font-weight: bold; 粗體
• font-weight: 500;
• font-family: 新細明體 字體樣式
• letter-spacing: 1px; 字距
• line-height: 12px line-height: 1.5em 行距
• text-align: center 橫的對齊
• text-decoration 設置文本的修飾線外觀的（下劃線、上劃線、貫穿線/刪除線或閃爍）

文字相關 part2：word-break 與 white-space

• word-break: break-word; 不會超出範圍，單字也不會被切開
• white-space: nowrap 句子永遠都會在同一行

你滿了，那我就漫出來了：overflow 與 text-overflow

<div>設有用，<span>沒有用

• overflow: auto : 會自動使用捲軸。
• overflow: visible : 不使用捲軸，超出的範圍的文字或圖片並不會隱藏，直接顯示出來。
• overflow: hidden; : 超出的字被隱藏起來。
• overflow: scroll; : 超出範圍會變成可以滾動的區域。

• overflow: inherit : 繼承自父元素的可見性

• text-overflow: ellipsis 超出的字用點點點蓋掉，前提是要設 hidden 和 nowrap

加了我質感瞬間升級：transition

• transition: all 1s 漸變效果
• transition: all 1s ease-in 動畫效果

Die Verwandlung：transform 的妙用

後面接的有點像是 function 的感覺

• transform: scale(2); : 依照中心點變大兩倍
• transform: rotate(180deg); : 轉 180 度
• transform: translateX(50px); : 往右移 50px
• transform: translateX(50px, -20px); 往右移 50px，往上移 20px (定位點是左上角，所以往下是正數)

讓物體在畫面的正中央(定位點是左上角)

top: 50%;
position: absolute;
transform: translateX(-50%, -50%);

因此要把物件往左上移自己的長寬一半一半

往左移自己的一半，往上移自己的一半，利用 transform: translate(-50%, -50%); 就可以了